<template>
	<view >
		<status-bar ref='statusbar' title='答题' back='1'></status-bar>
		<view class="proInfo d-flex j-sb a-center" v-if="pageData">
			<view class="info d-flex f-column">
				<view class="row j-sb a-center white h7">
					<view class="d-flex a-center">
						<text class="opacity">答题进度 </text>
						<text class="bold m-left10 m-right6">{{pageData.ID}}</text>
						<text class="opacity"> /{{pageData.allNum}}</text>
					</view>
					
					<Rematime :downTime="downTime" v-if="downTime != 0"></Rematime>	
				</view>
				<view class="proBox">
					<view class="proli" :style="{width:proBar}"></view>
				</view>
			</view>

			<view class="d-flex f-column a-center" @click="toUrl(`card?act_id=${act_id}&gid=${gid}`)">
				<view class="iconfont icon-dingdan white size30"></view>
				<text class="white h7 m-top6">答题卡</text>
			</view>
		</view>



		<view class="viewbox auto m-top50" v-if="pageData">
			<view class="Opt white h7 bgffb" v-if="pageData.answer_number == 1">单选题</view>
			<view class="Opt white h7 bg43" v-else>多选题</view>
			<view class="rows m-top12 color_33 size32 bold500">{{pageData.item_title}}</view>
			<view class="rows m-top20" v-if="pageData && pageData.data.length">
				<view class="list" :class="{active:result.indexOf(item.data_id) != -1}" 
				     v-for="(item,index) in pageData.data" :key="index"
					@click="solution(item)">
					<view class="dots flexac">
						<view class="dot"></view>
					</view>
					<text class="flex-1 color_33 size30 p-left20">{{item.data_title}}</text>
				</view>
			</view>

		</view>

		<!-- bgFF -->
		<view class="viewbox auto d-flex a-center m-top100 m-bot50" v-if="pageData">
			<view class="flex-1" v-if="pageData.prev_item_id">
				<view class="btns bgF3 flexac" @click="question(prev_item_id)">上一题</view>
			</view>
			<view class="flex-1 d-flex j-end" >
				<view class="btns bgF3 flexac" @click="answerBtn">下一题</view>
			</view>


		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Rematime from '../components/Rematime.vue'
	export default {
		components:{
			Rematime
		},
		data() {
			return {
				act_id: '',
				gid: '',
				pageData: '',
				item_id:'',
				prev_item_id:'',
				next_item_id:'',
				result: [],
				nextBtn:true,
				downTime:'',
			}
		},
		onLoad(opt) {
			if (opt.act_id) this.act_id = opt.act_id;
			if (opt.gid) this.gid = opt.gid;
			if (opt.item_id) this.item_id = opt.item_id;
			this.question(this.item_id);
		},

		methods: {
			question(item_id) {
				this.$http.post({
					url: '/SRA_Standup2021/question',
					data: {
						token: this.bid,
						act_id: this.act_id,
						gid: this.gid,
						item_id:item_id?item_id:'',
					}
				}).then(res => {
					if (!res.success) return;
					if(res.success == '100002') return this.$Toast(res.data,2);
					if(res.success == '100001'){
						this.nextBtn = false;
						this.$Modal('提示',res.data).then(data=>{
							this.$back();
						})
					} 
					const result = res.data;
					const list = result.data || [];
					list.forEach((item, index) => {
						item.isFlag = false;
						item.sort = String.fromCharCode(65 + index)
					})
					this.pageData = result;
					
					this.prev_item_id = result.prev_item_id;
					this.next_item_id = result.next_item_id;
					if(!this.downTime) this.downTime = result.item_time
				})
			},

			solution(item) {
				const index = this.pageData.data.findIndex((n) => n.data_id == item.data_id)
				if(this.pageData.answer_number == 1){
					this.result = [];
					this.result.push(item.data_id);
					return;
				} 
				if (this.pageData.answer_number > 1) {
					if(this.result.indexOf(item.data_id) == -1) return this.result.push(item.data_id);
					const sourIndex = this.result.findIndex((n) => n == item.data_id);
					this.result.splice(sourIndex, 1)
				}
			},
			
			answerBtn(){
				if(!this.result.length) return this.$Toast('还未选择答案~');
				this.$http.post({
					url:'/SRA_Standup2021/Answer',
					data:{
						token:this.bid,
						act_id:this.act_id,
						data_id:this.result.toString(),
						udid:this.pageData.udid
					}
				}).then(res=>{
					if(res.success == '100001') return this.$Toast(res.data);
					 if(!res.success) return this.$Toast(res.data);
					 this.result = [];
					 this.question(this.next_item_id);
				})
			}
		},
		computed: {
			...mapState(['bid']),
			proBar() {
				return (this.pageData.ID / this.pageData.allNum) * 100 + '%'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.proInfo {
		width: 100%;
		padding: 10rpx 30rpx;
		background-color: #FF4D42;
	}

	.info {
		width: 490rpx;
	}

	.proBox {
		width: 100%;
		height: 10rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 5rpx;
		overflow: hidden;
		margin-top: 12rpx;
		position: relative;
	}

	.proli {
		height: 10rpx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
		border-radius: 5rpx;
		overflow: hidden;

	}

	.opacity {
		opacity: 0.9;
	}

	.Opt {
		padding: 4rpx 14rpx;
		border-radius: 10rpx;
		display: inline;
	}

	.bgffb {
		background-color: #FFB346;
	}

	.bg43 {
		background-color: #43A0FF;
	}

	.list {
		width: 100%;
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.dots {
		width: 32rpx;
		height: 32rpx;
		border: 1px solid #E94356;
		border-radius: 50%;
		overflow: hidden;

	}

	.dot {
		width: 20rpx;
		height: 20rpx;
		background-color: #ffffff;
		border-radius: 50%;
		overflow: hidden;
	}

	.active .dot {
		background-color: #E94356;
	}

	.btns {
		width: 236rpx;
		height: 66rpx;
		border-radius: 33rpx;
		font-size: 32rpx;
		color: #ffffff;
	}

	.bgFF {
		background-color: #FF6C6C;
	}

	.bgF3 {
		background-color: #F34343;
	}
</style>